<!--
  author: tangcheng_cd
  create by: 2020/6/30
  descr: 币种列表
-->
<template>
    <el-select :value="selValue" @change="selValueChange" placeholder="请选择" v-bind="selectProps">
        <!-- 为什么label中显示value:刘乔伊说老系统里显示的币种下拉款为英文值，所以改了-->
        <el-option
            v-for="(item, itemIndex) in dataList"
            :key="itemIndex"
            :label="item[optionModel.label]"
            :value="item[optionModel.value]">
        </el-option>
    </el-select>
</template>

<script type="text/ecmascript-6">
    import {
        QUERY_CURRENCY_INFO
    } from '@api/url'
    import ajax from '@api/ajax'

    export default {
        name: 'currency-select',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: { // 当前选择的值
                required: true
            },
            optionModel: { // select选项显示和值模型
                type: Object,
                default () {
                    return {
                        label: 'currencyName',
                        value: 'currencyType'
                    }
                }
            },
            selectProps: { // 内部select属性配置
                type: Object,
                default () {
                    return {
                        size: 'mini',
                        clearable: true,
                        filterable: true
                    }
                }
            },
            dataFilter: { // 数据过滤器
                type: Function,
                default: null
            }
        },
        data () {
            return {
                selValue: null,
                dataList: []
            }
        },
        watch: {
            value () {
                this.selValue = this.value
            }
        },
        methods: {
            selValueChange (newVal) {
                this.selValue = newVal
                this.$emit('change', newVal)
            },
            loadDataList () {
                ajax.post(QUERY_CURRENCY_INFO).then(res => {
                    let dataList = res.data || []
                    if (this.dataFilter && this.dataFilter instanceof Function) {
                        dataList = dataList.filter(this.dataFilter)
                    }
                    this.dataList = dataList
                }).catch(err => {
                    console.error('币种查询失败！', err)
                })
            }
        },
        created () {
            this.selValue = this.value
            this.loadDataList()
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>
